<template>
  <div id="dialogReply">
    <el-dialog
      class="about-set"
      title="评论回复"
      :visible.sync="dialogData.isShow"
      width="830px"
      :before-close="labelHandleClose"
    >
      <div class="form-box">
        <el-image fit="contain" :src="robotAvatar"></el-image>
        <el-input
          maxlength="150"
          show-word-limit
          v-model.trim="content"
          placeholder="说点什么吧"
          clearable
        ></el-input>
        <el-button type="info" @click="showUpImg">
          添加图片
        </el-button>
        <el-button
          v-for="item in showBtnList"
          :key="item.dictValue"
          type="info"
          @click="changeCon(item.dictValue)"
        >
          {{ item.dictLabel }}
        </el-button>
        <!--表情按钮-->
        <el-popover
          v-model="visiblePop"
          popper-class="showLook zIndexAuto"
          style="margin:0 10px;"
          placement="top"
          width="700"
          trigger="click"
        >
          <img
            v-for="(item, index) in lookList"
            :key="index"
            :src="item.url"
            alt="item.title"
            :title="item.title"
            @click="pushLook(item.title)"
          />
          <el-button slot="reference" type="info">
            表情
          </el-button>
        </el-popover>
        <!--添加图片组件-->
        <uploadCommonImg
          v-if="dialogUpImgData.isShow"
          class="upImg"
          :dialog-data="dialogUpImgData"
          @setImgInfo="setImgInfo"
        ></uploadCommonImg>
      </div>
      <slot name="historyList"></slot>
      <span slot="footer" class="dialog-footer">
        <el-button type="success" plain @click="cancelLabel">取 消</el-button>
        <el-button type="success" :loading="loading" @click="sendContent"
          >确认</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getCommons } from '@/api/commentManagement/commentManage' // 接口
import { pubReply } from '@/api/common/commentsAPI' // 接口
import { getRandomRobot } from '@utils/dictionariesFunc' // 接口
import uploadCommonImg from '@common/uploadCommonImg' // 上传图片公共组件
export default {
  name: 'dialogReply',
  msg: '互动消息管理-回复消息弹窗',
  components: {
    uploadCommonImg
  },
  props: {
    dialogData: {
      type: Object,
      default() {
        return {
          isShow: false, // 默认隐藏
          commentId: ''
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      content: '',
      lookList: [], // 表情列表
      visiblePop: false,
      showBtnList: [
        { dictLabel: '通用低配', dictValue: 4 },
        { dictLabel: '通用高配', dictValue: 5 }
      ],
      dialogUpImgData: {
        isShow: false
      },
      images: [],
      robotAvatar: '', // 随机马甲头像
      robotUserId: '' // 随机马甲id
    }
  },
  watch: {
    visiblePop(newV, oldV) {
      // 监听表情弹窗是否打开，给表情列表赋值
      this.lookList = newV ? this.$store.getters.lookList : []
    }
  },
  mounted() {
    if (this.dialogData.userId) {
      this.robotUserId = this.dialogData.userId
      this.robotAvatar = this.dialogData.avatar
    } else {
      //获取随机马甲
      this.getRobots()
    }
  },
  methods: {
    /*显示上传图片组件*/
    showUpImg() {
      this.dialogUpImgData.isShow = true
    },
    /*图片上传成功，给 imgInfo 赋值*/
    setImgInfo(info) {
      this.images = info
    },
    /*获取随机评论语*/
    changeCon(type) {
      let params = {
        grade: type
      }
      getCommons(params, (response) => {
        this.content = response
      })
    },
    /* 添加表情 */
    pushLook(title) {
      this.content += `[${title}]`
    },
    /* 发送评论 */
    sendContent() {
      if (this.content.trim().length === 0 && this.images.length === 0) {
        this.$message({
          message: '发送内容不能为空',
          type: 'warning'
        })
        return
      }
      this.loading = true
      let params = {
        images: this.images,
        content: this.content,
        robotUserId: this.robotUserId
      }
      pubReply(
        this.dialogData.commentId,
        params,
        (response) => {
          this.loading = false
          this.$emit('refresh', this.dialogData.index)
          this.cancelLabel()
        },
        (response) => {
          this.$message.warning('回复失败，' + response.message)
          this.loading = false
        }
      )
    },
    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.loading = false
      this.dialogData.id = ''
      this.dialogData.userId = ''
      this.dialogData.index = ''
      this.dialogData.avatar = ''
      this.dialogData.isShow = false
    },
    // 获取运营人员下的随机马甲
    getRobots() {
      // let user = sessionStorage.getItem('userInfo')
      let user = localStorage.getItem('userInfo')
      let userId = JSON.parse(user).dapengUserId
      getRandomRobot(
        userId,
        (response) => {
          this.robotAvatar = response.robotAvatar
          this.robotUserId = response.robotId
        },
        (response) => {
          this.$message.warning(response.message)
        }
      )
    }
  }
}
</script>

<style lang="less">
#dialogReply {
  .el-input__inner,
  .el-input__icon {
    height: 30px;
    line-height: 30px;
  }
  .el-input__inner {
    padding-right: 75px;
  }
  .el-image {
    width: 35px;
    height: 35px;
    vertical-align: -10px;
    margin-right: 10px;
  }
  .form-box {
    .el-input {
      width: 385px;
      margin-right: 10px;
    }
  }
  .el-dialog__body {
    min-height: 220px !important;
  }
  .upImg {
    margin: 10px 0 10px 46px;
  }
  .history-list {
    .el-image {
      width: 100% !important;
      height: 100% !important;
      margin-right: 0 !important;
    }
  }
}
</style>
